import * as echarts from 'echarts'

// 组件分类数据
export const componentCategories = [
  {
    type: 'basic',
    name: '基础组件',
    components: [
      { 
        type: 'text', 
        name: '文本', 
        icon: 'Document',
        description: '用于显示文字内容'
      },
      {
        type: 'image',
        name: '图片',
        icon: 'Picture',
        description: '用于展示图片'
      },
      {
        type: 'video',
        name: '视频',
        icon: 'VideoPlay',
        description: '用于播放视频'
      },
      {
        type: 'iframe',
        name: '内嵌页面',
        icon: 'Monitor',
        description: '用于嵌入其他网页'
      }
    ]
  },
  {
    type: 'charts',
    name: '图表组件',
    components: [
      {
        type: 'bar',
        name: '柱状图',
        icon: 'Histogram',
        description: '柱状图系列',
        subTypes: [
          { 
            type: 'bar-basic', 
            name: '基础柱状图',
            description: '最基础的柱状图表现形式'
          },
          {
            type: 'bar-stack',
            name: '堆叠柱状图',
            description: '展示数据的堆叠关系'
          },
          {
            type: 'bar-group',
            name: '分组柱状图',
            description: '展示分组数据的对比'
          },
          {
            type: 'bar-horizontal',
            name: '条形图',
            description: '横向展示的柱状图'
          }
        ]
      },
      {
        type: 'line',
        name: '折线图',
        icon: 'DataLine',
        description: '折线图系列',
        subTypes: [
          {
            type: 'line-basic',
            name: '基础折线图',
            description: '基础的折线图表现形式'
          },
          {
            type: 'line-area',
            name: '面积图',
            description: '带有面积填充的折线图'
          },
          {
            type: 'line-stack',
            name: '堆叠面积图',
            description: '多个面积图堆叠展示'
          }
        ]
      },
      {
        type: 'pie',
        name: '饼图',
        icon: 'PieChart',
        description: '饼图系列',
        subTypes: [
          {
            type: 'pie-basic',
            name: '基础饼图',
            description: '基础的饼图表现形式'
          },
          {
            type: 'pie-rose',
            name: '南丁格尔玫瑰图',
            description: '玫瑰图形式的饼图'
          },
          {
            type: 'pie-doughnut',
            name: '环形图',
            description: '中间带有空心的饼图'
          }
        ]
      }
    ]
  },
  {
    type: 'info',
    name: '信息组件',
    components: [
      {
        type: 'counter',
        name: '计数器',
        icon: 'Odometer',
        description: '数字计数动画',
        defaultProps: {
          value: 12345,
          prefix: '',
          suffix: '',
          decimals: 0,
          duration: 2,
          useGrouping: true,
          useEasing: true,
          separator: ',',
          decimal: '.'
        }
      },
      {
        type: 'progress',
        name: '进度条',
        icon: 'Loading',
        description: '展示进度信息',
        defaultProps: {
          percentage: 75,
          type: 'line',
          strokeWidth: 6,
          showText: true,
          color: '#409EFF',
          trackColor: '#e5e9f2'
        }
      },
      {
        type: 'statistic',
        name: '统计数值',
        icon: 'DataLine',
        description: '展示统计数据',
        defaultProps: {
          title: '访问量',
          value: 234567,
          precision: 0,
          prefix: '',
          suffix: '',
          color: '#409EFF'
        }
      },
      {
        type: 'clock',
        name: '时钟',
        icon: 'Timer',
        description: '展示时间信息',
        defaultProps: {
          format: 'HH:mm:ss',
          showDate: true,
          dateFormat: 'YYYY-MM-DD',
          color: '#fff',
          fontSize: '24px'
        }
      }
    ]
  },
  {
    type: 'media',
    name: '媒体组件',
    components: [
      {
        type: 'video',
        name: '视频',
        icon: 'VideoPlay',
        description: '视频播放器',
        defaultProps: {
          src: '',
          autoplay: false,
          loop: false,
          muted: false,
          controls: true,
          poster: ''
        }
      },
      {
        type: 'carousel',
        name: '轮播图',
        icon: 'Picture',
        description: '图片轮播展示',
        defaultProps: {
          images: [],
          interval: 3000,
          arrow: 'hover',
          indicator: true,
          autoplay: true,
          type: 'card'
        }
      },
      {
        type: 'weather',
        name: '天气',
        icon: 'Sunny',
        description: '天气信息展示',
        defaultProps: {
          city: '北京',
          type: 'simple',
          color: '#fff',
          fontSize: '16px'
        }
      }
    ]
  },
  {
    type: 'table',
    name: '表格组件',
    components: [
      {
        type: 'table-basic',
        name: '基础表格',
        icon: 'List',
        description: '基础数据表格',
        defaultProps: {
          data: [],
          columns: [],
          stripe: true,
          border: false,
          height: 'auto'
        }
      },
      {
        type: 'table-scroll',
        name: '滚动表格',
        icon: 'List',
        description: '自动滚动的表格',
        defaultProps: {
          data: [],
          columns: [],
          step: 1,
          delay: 3000,
          hoverStop: true
        }
      }
    ]
  },
  {
    type: 'list',
    name: '列表组件',
    components: [
      {
        type: 'list-basic',
        name: '基础列表',
        icon: 'List',
        description: '基础数据列表',
        defaultProps: {
          data: [],
          itemLayout: 'horizontal',
          bordered: false,
          split: true
        }
      },
      {
        type: 'list-scroll',
        name: '滚动列表',
        icon: 'List',
        description: '自动滚动的列表',
        defaultProps: {
          data: [],
          step: 1,
          delay: 3000,
          direction: 'vertical',
          hoverStop: true
        }
      }
    ]
  },
  {
    type: 'map',
    name: '地图组件',
    components: [
      {
        type: 'map-china',
        name: '中国地图',
        icon: 'Location',
        description: '中国地图可视化',
        defaultProps: {
          data: [],
          roam: true,
          zoom: 1,
          center: [104.114129, 37.550339],
          showLabel: true
        }
      },
      {
        type: 'map-world',
        name: '世界地图',
        icon: 'Location',
        description: '世界地图可视化',
        defaultProps: {
          data: [],
          roam: true,
          zoom: 1,
          center: [0, 0],
          showLabel: true
        }
      }
    ]
  },
  {
    type: 'decoration',
    name: '装饰组件',
    components: [
      {
        type: 'border',
        name: '边框',
        icon: 'Grid',
        description: '装饰用边框',
        subTypes: [
          {
            type: 'border-1',
            name: '边框1',
            description: '科技感边框1',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '3px',
              borderStyle: 'solid',
              cornerWidth: '20px',
              cornerLength: '4px',
              cornerColor: '#03d2d4'
            }
          },
          {
            type: 'border-2',
            name: '边框2',
            description: '科技感边框2',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '2px',
              borderStyle: 'solid',
              cornerWidth: '20px',
              cornerLength: '4px',
              cornerColor: '#03d2d4'
            }
          },
          {
            type: 'border-3',
            name: '边框3',
            description: '科技感边框3',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '2px',
              borderStyle: 'solid',
              multipleLines: true,
              shadowColor: 'rgba(3,210,212,0.5)',
              shadowBlur: '10px'
            }
          },
          {
            type: 'border-4',
            name: '边框4',
            description: '科技感边框4',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '2px',
              borderStyle: 'solid',
              cornerWidth: '30px',
              cornerLength: '4px',
              cornerColor: '#03d2d4',
              cornerLocation: 'top-right'
            }
          },
          {
            type: 'border-5',
            name: '边框5',
            description: '科技感边框5',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '2px',
              borderStyle: 'solid',
              cornerWidth: '10px',
              cornerLength: '30px',
              cornerColor: '#03d2d4',
              cornerGap: '10px'
            }
          },
          {
            type: 'border-6',
            name: '边框6',
            description: '科技感边框6',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'rgba(3,210,212,0.1)',
              borderWidth: '1px',
              borderStyle: 'solid',
              glowColor: 'rgba(3,210,212,0.5)',
              glowSize: '10px'
            }
          },
          {
            type: 'border-7',
            name: '边框7',
            description: '科技感边框7',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '1px',
              borderStyle: 'solid',
              glowColor: '#03d2d4',
              glowSize: '10px',
              scanColor: 'rgba(3,210,212,0.5)',
              scanDuration: '3s'
            }
          },
          {
            type: 'border-8',
            name: '边框8',
            description: '科技感边框8',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '1px',
              borderStyle: 'solid',
              cornerWidth: '4px',
              cornerLength: '40px',
              cornerColor: '#03d2d4',
              cornerStyle: 'line'
            }
          },
          {
            type: 'border-9',
            name: '边框9',
            description: '科技感边框9',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '2px',
              borderStyle: 'solid',
              cornerWidth: '10px',
              cornerLength: '10px',
              cornerColor: '#03d2d4',
              cornerLocation: 'all'
            }
          },
          {
            type: 'border-10',
            name: '边框10',
            description: '科技感边框10',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'rgba(3,210,212,0.1)',
              borderWidth: '1px',
              borderStyle: 'solid',
              glowColor: 'rgba(3,210,212,0.5)',
              glowSize: '15px',
              scanDuration: '3s'
            }
          },
          {
            type: 'border-11',
            name: '边框11',
            description: '科技感边框11',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '2px',
              borderStyle: 'solid',
              titleHeight: '36px',
              titleColor: '#03d2d4',
              titleBackground: 'rgba(3,210,212,0.1)'
            }
          },
          {
            type: 'border-12',
            name: '边框12',
            description: '科技感边框12',
            defaultProps: {
              borderColor: '#03d2d4',
              backgroundColor: 'transparent',
              borderWidth: '1px',
              borderStyle: 'solid',
              cornerWidth: '4px',
              cornerLength: '40px',
              cornerColor: '#03d2d4',
              cornerStyle: 'line',
              scanLine: true
            }
          }
        ]
      },
      {
        type: 'decoration',
        name: '装饰',
        icon: 'PictureRounded',
        description: '装饰效果',
        subTypes: [
          {
            type: 'decoration-title',
            name: '装饰标题',
            description: '带有装饰效果的标题',
            defaultProps: {
              title: '标题文本',
              titleColor: '#03d2d4',
              fontSize: '24px',
              decorationColor: '#03d2d4',
              decorationType: 'line' // line, box, corner
            }
          },
          {
            type: 'decoration-particles',
            name: '粒子效果',
            description: '动态粒子效果',
            defaultProps: {
              particleColor: '#03d2d4',
              particleSize: 2,
              particleSpeed: 1,
              particleNumber: 50,
              lineColor: 'rgba(3,210,212,0.2)',
              lineWidth: 1
            }
          },
          {
            type: 'decoration-scan',
            name: '扫描线',
            description: '扫描线动画效果',
            defaultProps: {
              scanColor: '#03d2d4',
              scanWidth: '2px',
              scanDuration: '3s',
              scanDirection: 'horizontal' // horizontal, vertical
            }
          },
          {
            type: 'decoration-loading',
            name: '加载动画',
            description: '数据加载动画效果',
            defaultProps: {
              loadingColor: '#03d2d4',
              loadingSize: '40px',
              loadingType: 'circle' // circle, dots, bars
            }
          },
          {
            type: 'decoration-corner',
            name: '装饰角',
            description: '边角装饰效果',
            defaultProps: {
              cornerColor: '#03d2d4',
              cornerSize: '20px',
              cornerWidth: '2px',
              cornerStyle: 'line' // line, triangle, circle
            }
          },
          {
            type: 'decoration-light',
            name: '光效',
            description: '光效装饰',
            defaultProps: {
              lightColor: '#03d2d4',
              lightSize: '10px',
              lightType: 'pulse', // pulse, rotate, flash
              lightDuration: '2s'
            }
          }
        ]
      },
      {
        type: 'shape',
        name: '图形',
        icon: 'Stamp',
        description: '几何图形',
        subTypes: [
          {
            type: 'shape-hexagon',
            name: '六边形',
            description: '六边形装饰',
            defaultProps: {
              color: '#03d2d4',
              size: '100px',
              rotate: 0,
              borderWidth: '2px',
              borderStyle: 'solid'
            }
          },
          {
            type: 'shape-triangle',
            name: '三角形',
            description: '三角形装饰',
            defaultProps: {
              color: '#03d2d4',
              size: '100px',
              rotate: 0,
              borderWidth: '2px',
              borderStyle: 'solid'
            }
          },
          {
            type: 'shape-circle',
            name: '圆形',
            description: '圆形装饰',
            defaultProps: {
              color: '#03d2d4',
              size: '100px',
              borderWidth: '2px',
              borderStyle: 'solid',
              gradient: false
            }
          }
        ]
      },
      {
        type: 'svg',
        name: 'SVG动画',
        icon: 'Connection',
        description: 'SVG动画效果',
        subTypes: [
          {
            type: 'svg-wave',
            name: '波浪线',
            description: '波浪动画效果',
            defaultProps: {
              color: '#03d2d4',
              height: '40px',
              speed: 1,
              amplitude: 20
            }
          },
          {
            type: 'svg-path',
            name: '路径动画',
            description: '路径描边动画',
            defaultProps: {
              pathColor: '#03d2d4',
              pathWidth: '2px',
              duration: '3s',
              repeat: true
            }
          },
          {
            type: 'svg-dash',
            name: '虚线动画',
            description: '虚线运动效果',
            defaultProps: {
              lineColor: '#03d2d4',
              lineWidth: '2px',
              dashLength: '10,5',
              speed: 1
            }
          }
        ]
      }
    ]
  },
  {
    type: 'border',
    name: '边框组件',
    components: [
      {
        type: 'border-1',
        name: '边框1',
        icon: 'Picture',
        description: '科技感描边效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent',
          durtion: 3,
          reverse: false
        }
      },
      {
        type: 'border-2',
        name: '边框2',
        icon: 'Picture',
        description: '圆角描边效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'border-3',
        name: '边框3',
        icon: 'Picture',
        description: '立体投影效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'border-4',
        name: '边框4',
        icon: 'Picture',
        description: '光晕描边效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent',
          reverse: false
        }
      },
      {
        type: 'border-5',
        name: '边框5',
        icon: 'Picture',
        description: '流光环绕效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent',
          reverse: false
        }
      },
      {
        type: 'border-6',
        name: '边框6',
        icon: 'Picture',
        description: '科技感十足',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'border-7',
        name: '边框7',
        icon: 'Picture',
        description: '动感射线效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'border-8',
        name: '边框8',
        icon: 'Picture',
        description: '水波纹效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent',
          reverse: false
        }
      },
      {
        type: 'border-9',
        name: '边框9',
        icon: 'Picture',
        description: '层叠描边效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent'
        }
      },
      {
        type: 'border-10',
        name: '边框10',
        icon: 'Picture',
        description: '立体切割效果',
        props: {
          borderColor: ['#6586ec', '#2cf7fe'],
          backgroundColor: 'transparent'
        }
      }
    ]
  }
]

// 柱状图默认数据
export const barChartData = {
  // 基础柱状图
  'bar-basic': {
    type: 'bar-basic',
    name: '基础柱状图',
    description: '最基础的柱状图表现形式',
    data: [120, 200, 150, 80, 70, 110, 130],
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    defaultProps: {
      title: '基础柱状图',
      color: '#409EFF',
      showLabel: false,
      barWidth: 30,
      xAxisName: 'X轴',
      yAxisName: 'Y轴',
      showGrid: true
    }
  },
  // ... 其他柱状图类型配置
}

// 添加折线图默认数据
export const lineChartData = {
  // 基础折线图
  'line': {
    type: 'line',
    name: '基础折线图',
    description: '最基础的折线图表现形式',
    data: [120, 200, 150, 80, 70, 110, 130],
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    defaultProps: {
      title: '基础折线图',
      color: '#409EFF',
      showSymbol: true,
      smooth: false,
      showLabel: false,
      xAxisName: 'X轴',
      yAxisName: 'Y轴',
      showGrid: true
    }
  },
  // 面积图
  'line-area': {
    type: 'line-area',
    name: '面积图',
    description: '带有面积填充的折线图',
    data: [120, 200, 150, 80, 70, 110, 130],
    categories: ['周一', '周二', '周三', '周四', '周五', '周', '周日'],
    defaultProps: {
      title: '面积图',
      color: '#409EFF',
      showSymbol: true,
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      showLabel: false,
      xAxisName: 'X轴',
      yAxisName: 'Y轴',
      showGrid: true
    }
  },
  // 堆叠面积图
  'line-stack': {
    type: 'line-stack',
    name: '堆叠面积图',
    description: '多个面积图堆叠展示',
    data: [
      { name: '系列1', data: [120, 132, 101, 134, 90, 230, 210] },
      { name: '系列2', data: [220, 182, 191, 234, 290, 330, 310] }
    ],
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    defaultProps: {
      title: '堆面积图',
      series: [
        { name: '系列1', color: '#409EFF' },
        { name: '系列2', color: '#67C23A' }
      ],
      showSymbol: true,
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      showLabel: false,
      xAxisName: 'X轴',
      yAxisName: 'Y轴',
      showGrid: true
    }
  }
}

// 添加饼图默认数据
export const pieChartData = {
  // 基础饼图
  'pie-basic': {
    type: 'pie-basic',
    name: '基础饼图',
    description: '最基础的饼图表现形式',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 400, name: '搜索引擎' }
    ],
    defaultProps: {
      title: '基础饼图',
      showLabel: true,
      radius: '75%',
      center: ['50%', '50%']
    }
  },
  
  // 南丁格尔玫瑰图
  'pie-rose': {
    type: 'pie-rose',
    name: '南丁格尔玫瑰图',
    description: '南丁格尔玫瑰图形态的饼图',
    data: [
      { value: 40, name: '直接访问' },
      { value: 38, name: '邮件营销' },
      { value: 32, name: '联盟广告' },
      { value: 30, name: '视频广告' },
      { value: 28, name: '搜索引擎' }
    ],
    defaultProps: {
      title: '南丁格尔玫瑰图',
      showLabel: true,
      roseType: 'radius',
      radius: ['20%', '75%'],
      center: ['50%', '50%']
    }
  },
  
  // 环形图
  'pie-doughnut': {
    type: 'pie-doughnut',
    name: '环形图',
    description: '环形的饼图',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ],
    defaultProps: {
      title: '环形图',
      showLabel: true,
      radius: ['40%', '75%'],
      center: ['50%', '50%']
    }
  },
  
  // 旋转饼图
  'pie-rotate': {
    type: 'pie-rotate',
    name: '旋转饼图',
    description: '可以旋转的饼图',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 400, name: '搜索引擎' }
    ],
    defaultProps: {
      title: '旋转饼图',
      showLabel: true,
      radius: '75%',
      center: ['50%', '50%'],
      startAngle: 45
    }
  }
}

// 添加环形图默认数据
export const ringChartData = {
  // 基础环形图
  'ring-basic': {
    type: 'ring-basic',
    name: '基础环形图',
    description: '基础的环形图表现形式',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ],
    defaultProps: {
      title: '基础环形图',
      showLabel: true,
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
    }
  },
  
  // 动态环形图
  'ring-dynamic': {
    type: 'ring-dynamic',
    name: '动态环形图',
    description: '带有动画效果的环形图',
    data: [
      { value: 80, name: '完成率' }
    ],
    defaultProps: {
      title: '动态环形图',
      showLabel: true,
      radius: ['60%', '70%'],
      center: ['50%', '50%'],
      startAngle: 90,
      color: ['#409EFF', 'rgba(64,158,255,0.2)'],
      animation: true,
      animationDuration: 2000
    }
  }
}

// 添加散点图默认数据
export const scatterChartData = {
  // 基础散点图
  'scatter-basic': {
    type: 'scatter-basic',
    name: '基础散点图',
    description: '用于展示数据的分布',
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 7.24],
      [4.0, 4.26],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 5.68]
    ],
    defaultProps: {
      title: '基础散点图',
      color: '#409EFF',
      symbolSize: 10,
      showLabel: false,
      xAxisName: 'X轴',
      yAxisName: 'Y轴',
      showGrid: true
    }
  },
  
  // 气泡图
  'scatter-bubble': {
    type: 'scatter-bubble',
    name: '气泡图',
    description: '带有大小维度的散点图',
    data: [
      [10.0, 8.04, 20],
      [8.0, 6.95, 40],
      [13.0, 7.58, 10],
      [9.0, 8.81, 30],
      [11.0, 8.33, 25],
      [14.0, 9.96, 15],
      [6.0, 7.24, 35],
      [4.0, 4.26, 22],
      [12.0, 10.84, 28],
      [7.0, 4.82, 33],
      [5.0, 5.68, 18]
    ],
    defaultProps: {
      title: '气泡图',
      color: '#409EFF',
      minSymbolSize: 10,
      maxSymbolSize: 50,
      showLabel: false,
      xAxisName: 'X轴',
      yAxisName: 'Y轴',
      showGrid: true
    }
  }
}

// 添加 getChartDefaultData 函数的导出
export const getChartDefaultData = (type) => {
  // 柱状图默认数据
  if (type.startsWith('bar-')) {
    return {
      data: [120, 200, 150, 80, 70, 110, 130],
      defaultProps: {
        title: '柱状图',
        color: '#409EFF',
        showLabel: true,
        barWidth: 30,
        xAxisName: 'X轴',
        yAxisName: 'Y轴',
        showGrid: true,
        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    }
  }
  
  // 环形图默认数据
  if (type.startsWith('ring-')) {
    return {
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      defaultProps: {
        title: '环形图',
        showLabel: true,
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
      }
    }
  }

  // 如果没有匹配的类型，返回基础配置
  return {
    data: [],
    defaultProps: {
      title: '未命名图表',
      showLabel: true,
      color: '#409EFF'
    }
  }
}

// 添加 isChartComponent 函数的导出
export const isChartComponent = (component) => {
  console.log('isChartComponent is called');
  return component && component.type && component.type.includes('chart');
}

// 修改预览图表配置
export const getPreviewChartOption = (type) => {
  // 基础配置
  const baseOption = {
    animation: false,
    grid: {
      top: 5,
      right: 5,
      bottom: 5,
      left: 5,
      containLabel: false
    }
  }

  // 创建渐变色
  const createGradient = (color1, color2) => {
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: color1 },
      { offset: 1, color: color2 }
    ])
  }

  switch (type) {
    // 柱状图预览配置
    case 'bar-basic':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [{
          type: 'bar',
          data: [20, 50, 30, 70, 40],
          itemStyle: {
            color: createGradient('#83bff6', '#188df0')
          }
        }]
      }
      
    case 'bar-stack':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [
          {
            type: 'bar',
            stack: 'total',
            data: [20, 30, 40, 50, 60],
            itemStyle: { color: '#409EFF' }
          },
          {
            type: 'bar',
            stack: 'total',
            data: [30, 40, 50, 60, 70],
            itemStyle: { color: '#67C23A' }
          }
        ]
      }

    case 'bar-group':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [
          {
            type: 'bar',
            data: [20, 30, 40, 50, 60],
            itemStyle: { color: '#409EFF' }
          },
          {
            type: 'bar',
            data: [30, 40, 50, 60, 70],
            itemStyle: { color: '#67C23A' }
          }
        ]
      }

    // 折线图预览配置
    case 'line':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [{
          type: 'line',
          data: [20, 50, 30, 70, 40],
          smooth: false,
          symbol: 'circle',
          itemStyle: { color: '#409EFF' },
          lineStyle: { width: 2 }
        }]
      }

    case 'line-area':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [{
          type: 'line',
          data: [20, 50, 30, 70, 40],
          smooth: true,
          symbol: 'circle',
          areaStyle: {
            color: createGradient('#409EFF', 'rgba(64,158,255,0.1)')
          },
          itemStyle: { color: '#409EFF' },
          lineStyle: { width: 2 }
        }]
      }

    case 'line-stack':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [
          {
            type: 'line',
            stack: 'total',
            data: [20, 30, 40, 50, 60],
            smooth: true,
            symbol: 'circle',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#409EFF' },
                { offset: 1, color: 'rgba(64,158,255,0.1)' }
              ])
            },
            itemStyle: { color: '#409EFF' },
            lineStyle: { width: 2 }
          },
          {
            type: 'line',
            stack: 'total',
            data: [30, 40, 50, 60, 70],
            smooth: true,
            symbol: 'circle',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#67C23A' },
                { offset: 1, color: 'rgba(103,194,58,0.1)' }
              ])
            },
            itemStyle: { color: '#67C23A' },
            lineStyle: { width: 2 }
          }
        ]
      }

    // 图预览配置
    case 'pie-basic':
      return {
        series: [{
          type: 'pie',
          radius: '80%',
          center: ['50%', '50%'],
          data: [
            { value: 40, name: 'A' },
            { value: 30, name: 'B' },
            { value: 20, name: 'C' },
            { value: 10, name: 'D' }
          ],
          label: { show: false }
        }]
      }
    
    case 'pie-rose':
      return {
        series: [{
          type: 'pie',
          radius: ['20%', '80%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          data: [
            { value: 40, name: 'A' },
            { value: 30, name: 'B' },
            { value: 20, name: 'C' },
            { value: 10, name: 'D' }
          ],
          label: { show: false }
        }]
      }
    
    case 'pie-doughnut':
      return {
        series: [{
          type: 'pie',
          radius: ['40%', '80%'],
          center: ['50%', '50%'],
          data: [
            { value: 40, name: 'A' },
            { value: 30, name: 'B' },
            { value: 20, name: 'C' },
            { value: 10, name: 'D' }
          ],
          label: { show: false }
        }]
      }
    
    case 'pie-rotate':
      return {
        series: [{
          type: 'pie',
          radius: '80%',
          center: ['50%', '50%'],
          startAngle: 45,
          data: [
            { value: 40, name: 'A' },
            { value: 30, name: 'B' },
            { value: 20, name: 'C' },
            { value: 10, name: 'D' }
          ],
          label: { show: false }
        }]
      }
      
    // 环形图预览配置
    case 'ring-basic':
      return {
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          data: [
            { value: 40, name: 'A' },
            { value: 30, name: 'B' },
            { value: 20, name: 'C' },
            { value: 10, name: 'D' }
          ],
          label: { show: false }
        }]
      }
    
    case 'ring-dynamic':
      return {
        series: [{
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['50%', '50%'],
          startAngle: 90,
          data: [
            { value: 80, itemStyle: { color: '#409EFF' } },
            { value: 20, itemStyle: { color: 'rgba(64,158,255,0.2)' } }
          ],
          label: { show: false }
        }]
      }
      
    case 'scatter-basic':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'value' },
        yAxis: { show: false, type: 'value' },
        series: [{
          type: 'scatter',
          data: [[5, 5], [7, 7], [3, 3], [6, 6], [4, 4]],
          symbolSize: 10,
          itemStyle: { color: '#409EFF' }
        }]
      }

    case 'scatter-bubble':
      return {
        ...baseOption,
        xAxis: { show: false, type: 'value' },
        yAxis: { show: false, type: 'value' },
        series: [{
          type: 'scatter',
          data: [[5, 5, 20], [7, 7, 40], [3, 3, 10], [6, 6, 30], [4, 4, 15]],
          symbolSize: function (data) {
            return data[2] / 2
          },
          itemStyle: { color: '#409EFF' }
        }]
      }
      
    case 'border-1':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-2':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2
          }
        }]
      }

    case 'border-3':
      return {
        graphic: [
          {
            type: 'rect',
            shape: { x: 10, y: 10, width: 80, height: 80 },
            style: {
              fill: 'transparent',
              stroke: '#03d2d4',
              lineWidth: 2
            }
          },
          {
            type: 'rect',
            shape: { x: 15, y: 15, width: 70, height: 70 },
            style: {
              fill: 'transparent',
              stroke: '#03d2d4',
              lineWidth: 1
            }
          }
        ]
      }

    case 'border-4':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-5':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-6':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-7':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-8':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-9':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-10':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-11':
      return {
        graphic: [{
          type: 'rect',
          shape: { x: 10, y: 10, width: 80, height: 80 },
          style: {
            fill: 'transparent',
            stroke: '#03d2d4',
            lineWidth: 2,
            shadowBlur: 4,
            shadowColor: '#03d2d4'
          }
        }]
      }

    case 'border-12':
      return {
        graphic: [
          {
            type: 'rect',
            shape: { x: 10, y: 10, width: 80, height: 80 },
            style: {
              fill: 'transparent',
              stroke: '#03d2d4',
              lineWidth: 2,
              shadowBlur: 4,
              shadowColor: '#03d2d4'
            }
          },
          {
            type: 'group',
            children: [
              {
                type: 'rect',
                shape: { x: 5, y: 5, width: 15, height: 2 },
                style: { fill: '#03d2d4' }
              },
              {
                type: 'rect',
                shape: { x: 5, y: 5, width: 2, height: 15 },
                style: { fill: '#03d2d4' }
              }
            ],
            position: [10, 10]
          },
          {
            type: 'group',
            children: [
              {
                type: 'rect',
                shape: { x: -20, y: 5, width: 15, height: 2 },
                style: { fill: '#03d2d4' }
              },
              {
                type: 'rect',
                shape: { x: -7, y: 5, width: 2, height: 15 },
                style: { fill: '#03d2d4' }
              }
            ],
            position: [90, 10]
          }
        ]
      }
      
    default:
      return {
        ...baseOption,
        xAxis: { show: false, type: 'category' },
        yAxis: { show: false, type: 'value' },
        series: [{
          type: 'bar',
          data: [20, 50, 30, 70, 40],
          itemStyle: { color: '#409EFF' }
        }]
      }
  }
} 